<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>欢迎 - 单词学习应用</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="../css/main.css">
</head>
<body>
    <div class="app-container">
        <div class="statusbar"></div>
        
        <div class="flex flex-col items-center justify-center h-screen bg-gradient-to-b from-blue-50 to-blue-100 ios">
            <div class="absolute top-0 w-full h-full overflow-hidden z-0">
                <img src="https://images.unsplash.com/photo-1513001900722-370f803f498d?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2787&q=80" alt="" class="absolute top-0 left-0 w-full h-full object-cover opacity-10">
            </div>
            
            <div class="relative z-10 p-6 w-full max-w-md">
                <div class="text-center mb-12">
                    <div class="w-24 h-24 mx-auto mb-4 bg-white rounded-2xl shadow-lg flex items-center justify-center">
                        <i class="fas fa-graduation-cap text-blue-500 text-4xl"></i>
                    </div>
                    <h1 class="text-3xl font-bold text-gray-800 mb-2">词汇达人</h1>
                    <p class="text-gray-600">轻松学习英语单词，提升词汇量</p>
                </div>
                
                <div class="bg-white rounded-2xl shadow-lg p-6 mb-6">
                    <form class="space-y-5">
                        <div class="form-group">
                            <label for="email" class="form-label">邮箱</label>
                            <input type="email" id="email" placeholder="请输入邮箱" class="form-input" />
                        </div>
                        
                        <div class="form-group">
                            <label for="password" class="form-label">密码</label>
                            <input type="password" id="password" placeholder="请输入密码" class="form-input" />
                        </div>
                        
                        <div class="flex justify-between items-center text-sm">
                            <div>
                                <input type="checkbox" id="remember" class="mr-1">
                                <label for="remember" class="text-gray-600">记住我</label>
                            </div>
                            <a href="#" class="text-blue-500 hover:text-blue-700">忘记密码?</a>
                        </div>
                        
                        <a href="home.html" class="btn btn-primary w-full text-center py-3">
                            登录
                        </a>
                    </form>
                </div>
                
                <div class="text-center space-y-4">
                    <p class="text-gray-600">还没有账号?</p>
                    <a href="#" class="btn btn-secondary w-full text-center py-3">
                        注册新账号
                    </a>
                    
                    <div class="flex items-center justify-center mt-6">
                        <span class="border-b border-gray-300 w-full"></span>
                        <span class="px-4 text-gray-500 text-sm">或</span>
                        <span class="border-b border-gray-300 w-full"></span>
                    </div>
                    
                    <div class="flex justify-center space-x-4 mt-4">
                        <a href="#" class="w-12 h-12 rounded-full bg-white shadow flex items-center justify-center">
                            <i class="fab fa-weixin text-green-500 text-2xl"></i>
                        </a>
                        <a href="#" class="w-12 h-12 rounded-full bg-white shadow flex items-center justify-center">
                            <i class="fab fa-apple text-gray-800 text-2xl"></i>
                        </a>
                        <a href="#" class="w-12 h-12 rounded-full bg-white shadow flex items-center justify-center">
                            <i class="fab fa-google text-red-500 text-2xl"></i>
                        </a>
                    </div>
                    
                    <a href="home.html" class="block text-gray-500 mt-6 text-sm">
                        跳过，直接体验
                    </a>
                </div>
            </div>
        </div>
    </div>
    
    <script src="../js/main.js"></script>
    <script>
        // 欢迎页面专用脚本
        document.addEventListener('DOMContentLoaded', function() {
            // 检测平台
            const platform = getPlatform();
            const theme = getTheme();
            const container = document.querySelector('.app-container');
            
            // 更新容器类
            if (container) {
                container.classList.remove('ios', 'android');
                container.classList.add(platform);
                
                if (theme === 'dark') {
                    container.classList.add('dark');
                    document.querySelector('.flex').classList.remove('from-blue-50', 'to-blue-100');
                    document.querySelector('.flex').classList.add('from-gray-900', 'to-gray-800');
                }
            }
            
            // 更新按钮类
            const primaryBtn = document.querySelector('.btn-primary');
            const secondaryBtn = document.querySelector('.btn-secondary');
            
            if (primaryBtn && platform === 'android') {
                primaryBtn.classList.add('android');
            }
            
            if (secondaryBtn && platform === 'android') {
                secondaryBtn.classList.add('android');
            }
            
            // 更新登录和跳过链接
            const links = document.querySelectorAll('a[href="home.html"]');
            links.forEach(link => {
                link.href = `home.html?platform=${platform}&theme=${theme}`;
            });
        });
    </script>
</body>
</html> 